import {
  getUser,
  deleteUser,
  createUser,
  updateUser,
  getDepartment,
} from '@/services/UserInfo/user';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Menu, Space, Tag, Modal, Checkbox, Form, Input } from 'antd';
import React, { useRef, useState, useEffect } from 'react';

export default () => {
  const action = useRef();
  const [users, setUsers] = useState([]);
  const [addvisible, setaddVisible] = useState(false);
  const [updatevisible, setupdateVisible] = useState(false);
  const [updateid, setupdateid] = useState('');
  const [form] = Form.useForm();
  const deleteUsers = async (id) => {
    const res = await deleteUser(id);
    console.log(res);
  };
  // 修改modal框
  const bianji = (text) => {
    setupdateid(text.id);
    form.setFieldsValue(text);
    setupdateVisible(true);
  };
  const columns = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '用户名',
      dataIndex: 'username',
      valueType: 'string',
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      valueType: 'string',
    },
    {
      title: '部门',
      dataIndex: 'department__department_name',
      valueType: 'string',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      valueType: 'string',
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: '状态',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      valueType: 'dateTime',
    },
    {
      title: '操作',
      width: 300,
      valueType: 'option',
      render: (text, record, _, action) => [
        <a
          key="editable"
          // onClick={() => {
          //   action?.startEditable?.(record.id);
          // }}
          onClick={() => bianji(record)}
        >
          编辑
        </a>,

        <a key="delete" onClick={() => deleteUsers(record.id)}>
          删除
        </a>,
        <TableDropdown
          key="actionGroup"
          onSelect={() => action?.reload()}
          menus={[
            { key: 'copy', name: '复制' },
            { key: 'delete', name: '删除' },
          ]}
        />,
      ],
    },
  ];
  // 隐藏model
  const hideModal = () => {
    setaddVisible(false);
    setupdateVisible(false);
  };
  // 添加按钮
  const onFinish = async (values) => {
    setaddVisible(false);
    const res = await createUser(values);
  };
  // 修改按钮
  const onupdateFinish = async (values) => {
    values['id'] = updateid;
    const res = await updateUser(values);
    setupdateVisible(false);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const getDepartments = async () => {
    const res = await getDepartment();
    console.log(res);
  };
  useEffect(() => {
    getDepartments();
  }, []);
  return (
    <>
      <ProTable
        columns={columns}
        request={async () => {
          const res = await getUser();
          setUsers(res.list);
          const total = res.total;

          return {
            data: res.list,
            success: true,
            total: total,
          };
        }}
        rowKey="id"
        dateFormatter="string"
        headerTitle="用户 Table"
        search={{
          defaultCollapsed: false,
          labelWidth: 'auto',
          optionRender: (searchConfig, formProps, dom) => [
            ...dom.reverse(),
            <Button key="out" onClick={() => {}}>
              导出
            </Button>,
          ],
        }}
        toolBarRender={() => [
          <Button key="primary" type="primary" onClick={() => setaddVisible(true)}>
            <PlusOutlined />
            新建
          </Button>,
        ]}
        total={23}
      />
      {/* 修改框 */}
      <Modal
        title="修改框"
        visible={updatevisible}
        // onOk={hideModal}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
        footer={null}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onupdateFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="role"
            name="role"
            rules={[{ required: true, message: 'Please input your role!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="nickname"
            name="nickname"
            rules={[{ required: true, message: 'Please input your nickname!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="department"
            name="department"
            rules={[{ required: true, message: 'Please input your department!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="phone"
            name="phone"
            rules={[{ required: true, message: 'Please input your phone!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="email"
            name="email"
            rules={[{ required: true, message: 'Please input your email!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="sex"
            name="sex"
            rules={[{ required: true, message: 'Please input your sex!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="status"
            name="status"
            rules={[{ required: true, message: 'Please input your status!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="title"
            name="title"
            rules={[{ required: true, message: 'Please input your title!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="position"
            name="position"
            rules={[{ required: true, message: 'Please input your position!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              修改
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      {/* 添加框 */}
      <Modal
        title="添加框"
        visible={addvisible}
        onOk={hideModal}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
        footer={null}
      >
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="nickname"
            name="nickname"
            rules={[{ required: true, message: 'Please input your nickname!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              添加
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
